﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js?v=@DateTime.Now.Ticks"></script>
    <script type="text/javascript" src="~/js/swiper-bundle.min.js?v=@DateTime.Now.Ticks"></script>
    <script type="text/javascript" src="~/lib/echarts/echarts.js?v=@DateTime.Now.Ticks"></script>

    <link rel="stylesheet" type="text/css" href="~/css/swiper-bundle.min.css?v=@DateTime.Now.Ticks">
    <link href="~/css/Equipment.css?v=@DateTime.Now.Ticks" rel="stylesheet" />

    <title>设备状态看板</title>
</head>
<body dg-chart-auto-resize="true"
      dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
      dg-chart-theme="{color:'#F0F0F0',actualBackgroundColor:'#181C41'}">
    <div class="head">
        <div class="title"><label>设备状态看板</label></div>
    </div>
    <div class="content">
        <div class="layout layout-left-top">
            <div class="panel panel-bg">
                <div class="title"><label>设备列表</label></div>
                <div class="quer">
                    <label id="localtime" style="float: right;font-weight:bold;"></label>
                </div>
                <div class="fordiv" style="height:93%;">
                    <div class="swiper mySwiper" style="height:100%;">
                        <div class="swiper-wrapper" style="height:100%;">
                            <!-- 用来盛轮播图图片的盒子 -->
                            @*
                            <div class="divfolt" style="width:10.2%; height:17.5%;">
                                <div class="label">1</div>
                                <div class="mesg">
                                    <p><spn>SN：</spn><label>80-0031-00001</label></p>
                                    <p><spn>名称：</spn><label>TYUTT/NAME</label></p>
                                    <p><spn>状态：</spn><label class="status">正在运行</label></p>
                                </div>
                            </div>
                            *@
                        </div>
                        @*
                        <!-- 轮播图的下一页按钮 -->
                        <!--<div class="swiper-button-next"></div>-->
                        <!-- 轮播图的上一页按钮 -->
                        <!--<div class="swiper-button-prev"></div>-->
                        <!-- 如果需要滚动条 -->
                        <!-- <div class="swiper-scrollbar"></div> -->
                        <!-- 轮播图的底下的导航小点点按钮 -->
                        *@
                        <div class="swiper-pagination" style="color:#FFF">1</div>
                    </div><!-- 用来盛整体内容的盒子 -->
                </div>
            </div>
        </div>
        <div class="layout layout-right-top">
            <div class="panel">
                <div class="title"><label>设备状态</label></div>
                <div id="eqmtstatus" class="chart"></div>
            </div>
        </div>
        <div class="layout layout-center-right">
            <div class="panel">
                <div class="title"><label>设备效率OEE</label></div>
                <div id="pointer" class="chart"></div>
            </div>
        </div>
        <div class="layout layout-right-bottom">
            <div class="panel panel-bg">
                <div class="title"><label>异常设备</label></div>
                <div class="chart">
                    <div class="tablebox">
                        <div class="tbl-header">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead style="background-color: #0E1236; color: #FFF; ">
                                    <tr>
                                        <th>排序</th>
                                        <th>设备SN</th>
                                        <th>设备名</th>
                                        <th>设备状态</th>
                                    </tr>
                                </thead>
                                <tbody class="table-body" style="opacity:0;"></tbody>
                            </table>
                        </div>

                        <div class="tbl-body">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead style="background-color: #181C41;color:#FFF;">
                                    <tr>
                                        <th>排序</th>
                                        <th>设备SN</th>
                                        <th>设备名</th>
                                        <th>设备状态</th>
                                    </tr>
                                </thead>
                                <tbody class="table-body"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="~/js/equipment.js?v=@DateTime.Now.Ticks"></script>
    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        var scripts = $("script");
        for (var i = 0; i < scripts.length; i++) {
            if (scripts[i].src) {
                scripts[i].src = scripts[i].src + "?v=" + new Date().getTime();
            }
        }
    </script>
</body>
</html>